* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 500px;
    background: #000000;
}

#root,
.app {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
}

.home {
    display: flex;
    width: 100%;
    height: 100%;
    color: #fff;
    .left {
        width: 300px;
        height: 100%;
        background: #373743;
        margin-right: 20px;
        border-radius: 10px;
        .top,
        .bottom {
        border-radius: 10px;
            width: 100%;
            margin-top: 10px;
            height: 250px;
        }

        .top {
            border-bottom: 1px solid #ccc;
            .showStar {
                color: orange
            }
        }
    }

    .right {
        flex: 1;
        height: 100%;
        background: #373743;
        border-radius: 10px;
        ul {
            width: 100%;

            p,
            li {
                width: 100%;
                height: 45px;
                line-height: 45px;
                border-bottom: 1px solid #ccc;
                span {
                    display: inline-block;
                    width: 180px;
                    text-align: center;
                    margin-right: 50px;
                }

                .star {
                    color: #ccc;

                    &.active {
                        color: orange
                    }
                }
            }

        }
    }
}